<template>
  <div class="home-ishit">
    <h2 class="class-title">正在热映(51部)<span class="go">全部></span></h2>
    <el-row>
      <el-col
        class="ishit-module"
        :span="5"
        v-for="(isHit,index) in isHitList"
        :key="isHit.id"
      >
        <el-card :body-style="{ padding: '0px' }">
          <img
            :src="isHit.img_url"
            class="image"
          >
          <span class="title">{{ isHit.title }}</span>
          <div class="score">
            {{ isHit.score }}
          </div>
          <el-button
            type="text"
            class="button"
            @mouseover.native="changeColor(index)"
            @mouseout.native="moveColor()"
            ref="button"
          >购票</el-button>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>
<script>
export default {
  data: () => ({
    arr: [],
    isHitList: [],
  }),
  created() {
    this.getIsHit()
  },
  methods: {
    changeColor(index) {
      this.$emit('changeColor',{index:index,elem:this.$refs.button,bgColor:'#ef4238',ftColor:'#fff'})
    },
    moveColor() {
      this.$emit('moveColor',{bgColor:'#fff',ftColor:'#ef4238'})
    },
    async getIsHit() {
      try {
        const { data: { message } } = await this.Api.getIsHit()
        this.isHitList = message
      } catch (error) {
        this.$MsgBox('获取首页正在热映的信息失败')
      }
    }
  }
}
</script>
<style lang="less" scoped>
.home-ishit {
  .class-title {
    color: #ef4238;
  }
  .el-card {
    height: 260px;
    .title {
      bottom: 40px;
      left: 0;
    }
    .score {
      right: 6px;
      bottom: 40px;
      font-style: italic;
    }
    .button {
      margin-top: -4px;
      width: 100%;
      height: 39px;
      text-align: center;
      padding: 0;
      color: #ef4238;
    }
  }
}
</style>